<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input style="margin-bottom:10px" type="text" prefix-icon="el-icon-search" size="small"
          v-model="queryinfo.keyword" @input="seach" placeholder="输入员工姓名全员搜索" />
        <!-- 树形组件 -->
        <el-tree :data="deptlist" :props="defprops" default-expand-all :expand-on-click-node="false" node-key="id"
          ref="tree" highlight-current @current-change="selectdeptid">
          <template v-slot="{ data }">
            <span>{{ data.name }}</span>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" v-permission="'addperson'" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>
          <el-button size="mini" @click="showdailong = true">excel导入</el-button>
          <el-button size="mini" @click="ecportexcel">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="emplist" stripe style="width: 100%">
          <el-table-column prop="staffPhoto" align="center" label="头像">
            <template v-slot="{ row }">
              <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="30"></el-avatar>
              <span class="username" v-else>{{ row.username.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名">
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" sortable>
          </el-table-column>
          <el-table-column prop="workNumber" label="工号" sortable>
          </el-table-column>
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template v-slot="{ row }">
              {{ row.formOfEmployment === 1 ? '正式' : '非正式' }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门">
          </el-table-column>
          <el-table-column prop="timeOfEntry" label="入职时间">
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot="{ row }">
              <el-button type="text" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
              <el-button type="text" style="margin-right: 5px;" @click="addperbtn(row.id)">角色</el-button>
              <el-popconfirm title="确定删除这条数据吗？" @onConfirm="delemp(row.id)">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" algin="middle">
          <el-pagination @size-change="changesize" @current-change="changepage" :current-page="queryinfo.page"
            :page-sizes="[5, 6, 7, 8]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-row>
      </div>
    </div>
    <!-- 导入组件 -->
    <importexcel :showExcelDialog.sync="showdailong" @getempdata="getemplist"></importexcel>
    <el-dialog title="添加权限" :visible.sync="addpershow" width="30%" @close="perclose">
      <!-- checkbox里存储的时label里的值 -->
      <el-checkbox-group v-model="addperdata">
        <el-checkbox :label="item.id" v-for="item  in  rolelis" :key="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="perclose">取 消</el-button>
        <el-button type="primary" @click="queryaddper">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//导入file-saver包  用来将blob文件下载到本地
import FileSaver from 'file-saver';
import { getdepartment } from '@/api/department';
import { listchangetree } from '@/utils';
import { getemplist, exportemp, delemp, getperlist,getempbyid,upperrole } from '@/api/emplooyee';
//导入弹层组件
import importexcel from './components/importexcel.vue';
export default {
  name: 'Employee',
  components: {
    importexcel
  },
  data() {
    return {
      deptlist: [],
      //树形组件显示数据的配置对象
      defprops: {
        label: 'name',//lable 属性控制树形组件要显示 :data绑定的数据的哪个属性
        children: 'children'//children表示哪个属性是子级
      },
      queryinfo: {
        pagesize: 5,
        page: 1,
        departmentId: null,
        keyword: ''//搜索框绑定的数据
      },
      //员工信息
      emplist: [],
      //总条数
      total: 0,
      //控制导入组件的显示
      showdailong: false,
      //添加权限对话框是否显示
      addpershow: false,
      rolelis: [],
      addperdata:[],
      //获取当前添加角色的id
      activeid:null
    }
  },
  methods: {
    //获取部门信息
    async getdepartment() {
      const res = await getdepartment()
      //获取一次角色列表
      this.rolelis = await getperlist()
      //树组件的数据
      this.deptlist = listchangetree(res, 0)
      //树组件渲染页面时异步操作
      // 使用nextTick方法
      this.$nextTick(() => {
        //首次获取节点id
        this.queryinfo.departmentId = this.deptlist[0].id
        //首次获取节点后使用tree组件的方法选中该节点
        this.$refs.tree.setCurrentKey(this.queryinfo.departmentId)
        //首次获取员工信息
        this.getemplist()
      })
    },
    //切换节点
    selectdeptid(node) {
      this.queryinfo.departmentId = node.id
      //切换节点也就是切换部门,当部门切换时就重置查询参数
      this.queryinfo.page = 1
      this.queryinfo.pagesize = 5
      this.getemplist()
    },
    //获取员工信息
    async getemplist() {
      const res = await getemplist(this.queryinfo)
      this.emplist = res.rows
      this.total = res.total
    },
    //每页显示的条数
    changesize(val) {
      this.queryinfo.pagesize = val
      this.getemplist()
    },
    // 页码发送改变
    changepage(val) {
      this.queryinfo.page = val
      this.getemplist()
    },
    //搜索事件
    seach() {
      //防抖处理
      //每次执行都先清楚前一个定时器
      clearTimeout(this.timer)
      //给组件实例添加一个属性 用来记录定时器的id
      this.timer = setTimeout(() => {
        this.queryinfo.page = 1
        this.queryinfo.pagesize = 5
        this.getemplist()
      }, 500);
    },
    //导出员工表的excel
    async ecportexcel() {
      const res = await exportemp()
      FileSaver.saveAs(res, '员工信息表.xlsx')
      //使用npm包将blob文件下载到本地 file-saver
    },
    //删除员工
    async delemp(id) {
      await delemp(id)
      if (this.emplist.length === 1 && this.queryinfo.page > 1) {
        this.queryinfo.page--
      }
      this.getemplist()
      this.$message.success('删除成功')
    },
    //角色按钮
    async addperbtn(id) {
      this.activeid=id
      const res = await getempbyid(id)
      this.addperdata=res.roleIds
      this.addpershow = true
    },
    //关闭弹窗
    perclose(){
      this.addpershow = false
      this.addperdata=[]
      this.activeid=null
    },
    //确定添加角色
   async queryaddper(){
     await upperrole({id:this.activeid,roleIds:this.addperdata})
     this.$message.success('分配角色成功')
     this.perclose()
    }
  },
  created() {
    this.getdepartment()
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;

  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }

  .right {
    flex: 1;
    padding: 20px;

    .opeate-tools {
      margin: 10px;
    }

    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display: inline-block;
    }
  }
}
</style>
